.dynamic-variable-container {
	margin: 24px 0;

	.dynamic-variable-config-container {
		display: grid;
		grid-template-columns: 1fr 32px 16px 200px;
		gap: 16px;
		align-items: center;
		width: 100%;

		.ant-select {
			.ant-select-selector {
				border-radius: 4px;
				border: 1px solid var(--bg-slate-400);
			}
		}

		.ant-input {
			border-radius: 4px;
			border: 1px solid var(--bg-slate-400);
			max-width: 300px;
		}

		.dynamic-variable-from-text {
			font-family: 'Space Mono';
			font-size: 13px;
			font-weight: 500;
			white-space: nowrap;
		}
	}
}

.lightMode {
	.dynamic-variable-container {
		.dynamic-variable-config-container {
			.ant-select {
				.ant-select-selector {
					border: 1px solid var(--bg-vanilla-300);
				}
			}

			.ant-input {
				border: 1px solid var(--bg-vanilla-300);
			}
		}
	}
}
